<template>
  <div class="home">
    <el-card class="card">
      <search :fromLab="fromLab" @onadd="addbtn()" />
    </el-card>
    <el-card class="table">
      <xtable
        :tabData="tablelab"
        :tableData="tableData"
        :page="page"
        @onEdit="edit"
        @onCurrent="current"
      >
        <template v-slot:locked="scope">
          <!-- {{ scope }} -->
          <el-tag v-if="scope.scope.locked == 0" class="ml-2" type="success"
            >正常</el-tag
          >
          <el-tag
            v-else-if="scope.scope.locked == 1"
            class="ml-2"
            type="success"
            >锁定</el-tag
          >
          <el-tag v-else class="ml-2" type="success">未知</el-tag>
        </template>
      </xtable>
    </el-card>
    <xdialog
      ref="xdialogRef"
      :dialogLab="dialogLab"
      @formEmit="formEmit"
    ></xdialog>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import search from "../../../components/search/search.vue";
import xtable from "../../../components/table/table.vue";
import { newsquery, newsadd, userdelete } from "../../../service/index";
import { fromLab } from "./config/search";
import { tablelab } from "./config/table";
import { dialogLab } from "./config/dialog";
import xdialog from "../../../components/dialog/dialog.vue";
let tableData = ref([]);
let page = reactive({
  limit: 10,
  offset: 1,
  count: 0,
});
let xdialogRef = ref(null);
newsquery({
  limit: page.limit,
  offset: page.offset,
}).then((res) => {
  // console.log(res)
  tableData.value = res.data.rows;
  page.count = res.data.count;
  console.log(page);
});

const edit = (data, type) => {
  console.log(data.row.user_id, type);
  // type 0 修改 1 删除
  if (type == 0) {
    console.log(type);
    xdialogRef.value.isformdata(JSON.parse(JSON.stringify(data.row)));
  }
  if (type == 1) {
    userdelete({
      user_id: data.row.user_id,
    }).then((res) => {
      console.log(res);
    });
  }
};
const current = (data) => {
  // console.log(data)
  page = data;
  newsquery({
    limit: page.limit,
    offset: page.offset,
  }).then((res) => {
    tableData.value = res.data.rows;
    page.count = res.data.count;
    console.log(page);
  });
};

const addbtn = () => {
  console.log(xdialogRef.value);
  xdialogRef.value.isdialog();
};

// 添加用户数据
function formEmit(data) {
  newsadd(data).then((res) => {
    // console.log(res)
    current(page);
  });
}
</script>

<style lang="less" scoped>
.home {
  height: 100%;
}

.card {
  margin-bottom: 20px;
}

.table {
  // min-height: 100%;
  z-index: 1;
}
</style>
